﻿@{
    ViewBag.Title = "Calendar";
}
<link href="@Url.Content("~/Content/fullcalendar.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="@Url.Content("~/Scripts/fullcalendar.min.js")"></script>
<script type="text/javascript">
    var calendarType = "Activity";

    $(document).ready(function () {

        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();

        $('#calendar').fullCalendar({
            theme: true,
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            //events: 'Url.Action("ListActivities", "Calendar")',
            eventSources: [{url: '@Url.Action("ListActivities", "Calendar")'}, {url: '@Url.Action("ListVacations", "Calendar")'}],
            eventClick: ActivityEventClick,
            eventRender: ActivityEventRender
        });
    });

    $(document).ready(function () {
        $("#CalendarType").change(function () {
            $("#Areas").val('All');
            calendarType = $(this).val();
            var url = CalendarEventsSource(calendarType); //.toString();
            //var previousUrl = $('#calUrlValue').val();

            /*if (callendarType != 'All') {
            $('#calUrlValue').val('');
            $('#calendar').fullCalendar('removeEventSource', previousUrl);
            }
            else {*/
            //$('#calUrlValue').val(url[0]);
            //if (previousUrl == '') {
            var urls = CalendarEventsSource('All');
            $.each(urls, function (i, v) {
                $('#calendar').fullCalendar('removeEventSource', v);
            });
            //}
            //}
            //$('#calendar').fullCalendar('addEventSource', url);
            $.each(url, function (i, v) {
                $('#calendar').fullCalendar('addEventSource', v);
            });
            //$('#calendar').fullCalendar('refetchEvents');
        })
    });

    $(document).ready(function () {
        $("#Areas").change(function () {
            var source = {
                data: {
                    filter: $(this).val()
                },
                url: CalendarEventsSource($("#CalendarType").val()).toString()
            };
            $('#calendar').fullCalendar('removeEvents');
            $('#calendar').fullCalendar('addEventSource', source);
        })
    });

    function CalendarEventsSource(type) {
        var url = [];
        //var type = $("#CalendarType").val();

        if (type == "Activity" || type == 'All')
            url.push('@Url.Action("ListActivities", "Calendar")');
        if (type == "Vacation" || type == 'All')
            url.push('@Url.Action("ListVacations", "Calendar")');

        return url;
    }

    function ActivityEventRender(event, eventElement) {
        if ($("#CalendarType").val() != "Activity")
            return;

        var html = event.title;
        eventElement.context.innerHTML = html;
    }

    function ActivityEventClick(calEvent, jsEvent, view) {
        var calendarType = calEvent.type; //$("#CalendarType").val();
        if (calendarType == "activity") {
            // return;
            var b = null;

            if (!calEvent.completed) {
                b = { 'Set Complete': function () {
                    $.post('@Url.Action("ActivityModalPost", "Calendar")' + '/' + calEvent.id.toString(),
                            function (data) { $('#calendar').fullCalendar('refetchEvents'); });
                    $(this).dialog("close");
                    return true;
                }
                };
            }
            else if (calEvent.isAdm) {
                b = { 'Set Uncomplete': function () {
                    $.post('@Url.Action("ActivityModalUncomplete", "Calendar")' + '/' + calEvent.id.toString(),
                            function (data) { $('#calendar').fullCalendar('refetchEvents'); });
                    $(this).dialog("close");
                    return true;
                }
                };
            }
            $('<div></div>')
                    .load('@Url.Action("ActivityModal", "Calendar")' + '/' + calEvent.id.toString())
                    .dialog({
                        buttons: b,
                        resizable: false,
                        title: 'Schedule Description',
                        width: 500,
                        height: 400
                        //close: function (event, ui) { $('#calendar').fullCalendar('refetchEvents'); }
                    });
            return false;
        }
        else if (calendarType == 'vacation') {
            var b = null;

            $('<div></div>')
                    .load('@Url.Action("VacationModalDelete", "Calendar")' + '/' + calEvent.id.toString())
                    .dialog({
                        buttons: b,
                        resizable: false,
                        title: 'Schedule Description',
                        width: 500,
                        height: 160
                    });        
        }
    }
</script>
<input type="hidden" id="calUrlValue" value="@Url.Action("ListActivities", "Calendar")" />
<h2>
    Calendar Type:
    <select id="CalendarType">
        <option>All</option>
        <option>Activity</option>
        <option>Vacation</option>
    </select>
    Area:
    @Html.DropDownList("Areas")</h2>
<br />
<div id='calendar' style="float: none; margin-left: auto; margin-right: auto; width: 100%">
</div>
<script>
    $(document).ready(function () {
        $('#pageTitle').text('Calendar');
    });

    //    var brand = new brand('Calendar', '', 'top');
    //    createSectionTitleName();
    //    createFontWidget('all', 'yes');
</script>
